iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 10
0
Modern Web

30天入門JavaScript系列 第 10

【Day 10】函式(二):讓函式接受輸入值

  • 分享至 

  • xImage
  •  

昨天寫了丟硬幣的函式,今天來寫TRPG用的骰子

首先是1d20(一個20面骰)的函式

function roll1D20() {
  return Math.floor(Math.random() * 20) + 1;
}

然後是1d100(一個百面骰)

function roll1D100() {
  return Math.floor(Math.random() * 100) + 1;
}

最後再來個創角用的3D6(三個六面骰相加)

function roll3D6() {
  return (
    Math.floor(Math.random() * 6) +
    Math.floor(Math.random() * 6) +
    Math.floor(Math.random() * 6) +
    3
  );
}

會發現明明都是類似的功能,但卻要宣告三種不同的函式。
寫函式的目的就是減少重複的程式碼,但我們能讓函式接受不同輸入來達成不同輸出結果


讓函式接受輸入

function 函式(接收到的值) {
 //程式碼
}


//呼叫時
函式(想傳入的值);

在宣告時在()內定義接收值的名稱,收到輸入時就能在函式內使用這個值

函式呼叫時,加入在()內加入想傳送的值就能進行值的傳送。
而函式接受到的叫做參數(Parameter),呼叫時的傳入值叫引數(Argument)

//簡單範例
function add2(num) {
  return num + 2;
}

console.log(add2(5)); //7

//用逗號隔開可以多個參數跟引數
function BMI(height, weight) {
  return weight / (height * height);
}

console.log(BMI(1.7, 65)); //22.5

引數會依照順序配給參數,當當引數量<參數量時,多的參數值會是undefined
當引數量>參數量時,多餘的引數就不會被配給參數(但在函式內還是有辦法找得到)

預設參數

這是ES6新增的功能(ES5用別的方式也能實現),當呼叫沒有傳入值時可以有個預設的參數

語法:function 函式名稱(參數 = 預設值) {}
//範例:
function sayHello(name = '世界') {
  return '你好,' + name;
}
console.log(sayHello('小明')); //你好,小明
console.log(sayHello()); //你好,世界

最後來把開頭的TRPG骰子改寫一下,讓函式可以接受骰子面數跟數量(預設為1)

function rollDice(sided, times = 1) {
  let sum = 0;
  for (let i = 0; i < times; i++) {
    sum += Math.floor(Math.random() * sided) + 1;
  }
  return sum;
}

console.log(rollDice(20)); //投1D20
console.log(rollDice(100));//投1D100
console.log(rollDice(6, 3));//投3D6

這樣函式基礎部分就結束了,進階部分大概Day20以後會開始(如果沒有斷更)


上一篇
【Day 9】函式(一):函式 function簡介
下一篇
【Day 11】物件(一):物件簡介
系列文
30天入門JavaScript30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言